<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { axiosrnewmedical } from '@/http/axiosRead';

interface GuideCategory {
  id: number;
  name: string;
  sort: number;
}

const router = useRouter();
const categories = ref<GuideCategory[]>([]);
const loading = ref(false);

// 获取指南分类列表
const getGuideCategories = async () => {
  try {
    loading.value = true;
    const response = await axiosrnewmedical.get('/Guide/categories');
    
    if (response.data.code === 200) {
      categories.value = response.data.data;
    }
  } catch (error) {
    console.error('获取就医指南分类失败:', error);
  } finally {
    loading.value = false;
  }
};

// 跳转到文章列表
const goToArticles = (categoryId: number, categoryName: string) => {
  router.push({ 
    path: `/medical-guide/articles/${categoryId}`,
    query: { name: categoryName }
  });
};

// 返回首页
const goBack = () => {
  router.push('/home');
};

onMounted(() => {
  getGuideCategories();
});
</script>

<template>
  <div class="medical-guide-container">
    <!-- 导航栏 -->
    <van-nav-bar 
      title="就医指南" 
      left-arrow 
      @click-left="goBack" 
      fixed />
    
    <!-- 分类列表 -->
    <div class="category-list">
      <van-loading v-if="loading" class="loading" size="24px">加载中...</van-loading>
      
      <van-empty v-else-if="categories.length === 0" description="暂无分类" />
      
      <div 
        v-else
        v-for="category in categories" 
        :key="category.id"
        class="category-item"
        @click="goToArticles(category.id, category.name)">
        <div class="category-content">
          <van-icon name="guide-o" class="category-icon" />
          <span class="category-name">{{ category.name }}</span>
          <van-icon name="arrow" class="arrow-icon" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.medical-guide-container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-top: 46px;
}

.category-list {
  padding: 16px;
}

.loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.category-item {
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 20px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.category-item:active {
  transform: scale(0.98);
  background-color: #f8f9fa;
}

.category-content {
  display: flex;
  align-items: center;
}

.category-icon {
  font-size: 24px;
  color: #338aff;
  margin-right: 12px;
}

.category-name {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.arrow-icon {
  font-size: 16px;
  color: #999;
}
</style> 